<template>
	<view class="footer nav-bar">
		<view class="wrap">
			<view class="item router-link-exact-active active" v-for="(item,index) in list " :key="index"
				@click="navTo(item.url)">
				<image :src="active==index?item.active:item.litpic" mode="widthFix"></image>
				<text :class="active==index?'active':''">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @property {Number} active		下标
	 */
	export default {
		props: {
			active: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				list: [{
					name: '我的信息',
					url:"/pages/information/information",
					litpic: "",
					active: ""
				}, {
					name: '我的任务',
					url:"/pages/task/task",
					litpic: "",
					active: ""
				}, {
					name: '试听课程',
					url:"/pages/task/task",
					litpic: "",
					active: ""
				}, {
					name: '更多',
					url:"/pages/more/more",
					litpic: "",
					active: ""
				}]
			}
		},
		methods: {
			navTo(url) {
				uni.redirectTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.active {
		color: #f06e6c !important;
	}

	.nav-bar {
		height: 120rpx;

		.wrap {
			height: 120rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			text-align: center;
			background-color: #fff;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 25%;

				image {
					width: 40%;
				}
			}

			text {
				display: block;
				color: #999;
				font-size: 28rpx;
			}
		}
	}
</style>